<template xmlns:wx="http://www.w3.org/1999/xhtml">
  <div>
    <div class="pageheader">
      <XHeader :left-options="{backText:'',showBack:false}" :title="xheader.title" class="XHeader">
        <div slot="right" @click="onOff">关闭</div>
      </XHeader>
    </div>
    <div class="page">
      <div class="block" style="margin-top:12px">
        <div class="boxitem">
          <div class="title">发票类型</div>
          <div class="content">
            <div class="grid">
              <div class="grid-1-2">
                <div
                  class="button"
                  :class="invoiceTypeIndex==0?'active':''"
                  @click="onInvoiceType(0)"
                >普通发票
                </div>
              </div>
              <div class="grid-1-2">
                <div
                  class="button"
                  :class="invoiceTypeIndex==1?'active':''"
                  @click="onInvoiceType(1)"
                >增值税专用发票
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="block" v-if="invoiceTypeIndex==0">
        <div class="boxitem">
          <div class="title">发票抬头</div>
          <div class="content">
            <div class="grid">
              <div class="grid-1-2">
                <div
                  class="button"
                  :class="invoiceHeadIndex==0?'active':''"
                  @click="onInvoiceHead(0)"
                >个人
                </div>
              </div>
              <div class="grid-1-2">
                <div
                  class="button"
                  :class="invoiceHeadIndex==1?'active':''"
                  @click="onInvoiceHead(1)"
                >单位
                </div>
              </div>
            </div>
            <div style="margin-top:12px;" v-if="invoiceHeadIndex==1">
              <div class="inputbox">
                <input class="input" v-model="issue[1].inv_company" placeholder="请输入单位名称" @focusout="inputBlur" @focusin="inputFocus">
              </div>
              <div class="inputbox">
                <input class="input" v-model="issue[1].inv_code" placeholder="请输入纳税人识别号" @focusout="inputBlur" @focusin="inputFocus">
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="block" v-if="invoiceTypeIndex==0">
        <div class="boxitem">
          <div class="title">收票人信息</div>
          <div class="content">
            <div class="inputbox">
              <div class="text">收票人手机号</div>
              <input
                class="input"
                v-model="issue[issueType].inv_receive.phone"
                placeholder="请输入手机号"
                type="number"
                maxlength="11"
                @focusout="inputBlur"
                @focusin="inputFocus"
              >
            </div>
            <div class="inputbox">
              <div class="text">收票人邮箱</div>
              <input
                class="input"
                v-model="issue[issueType].inv_receive.email"
                placeholder="请输入邮编"
                type="number"
                maxlength="6"
                @focusout="inputBlur"
                @focusin="inputFocus"
              >
            </div>
          </div>
        </div>
      </div>

      <!-- 增值税专用发票 -->
      <div v-if="invoiceTypeIndex==1" style="margin-top:12px;">
        <div v-if="issue[2]">
          <div class="block">
            <div class="boxitem">
              <div class="title">增票资质</div>
              <div>
                <div class="inputbox">
                  <div class="text">单位名称</div>
                  <input class="input" v-model="issue[2].inv_company" placeholder="请输入单位名称" @focusout="inputBlur" @focusin="inputFocus">
                </div>
                <div class="inputbox">
                  <div class="text">纳税人编号</div>
                  <input class="input" v-model="issue[2].inv_code" placeholder="请输入纳税人编号" @focusout="inputBlur" @focusin="inputFocus">
                </div>
                <div class="inputbox">
                  <div class="text">注册地址</div>
                  <input class="input" v-model="issue[2].inv_reg_addr" placeholder="请输入注册地址" @focusout="inputBlur" @focusin="inputFocus">
                </div>
                <div class="inputbox">
                  <div class="text">注册电话</div>
                  <input class="input" v-model="issue[2].inv_reg_phone" placeholder="请输入注册电话" @focusout="inputBlur" @focusin="inputFocus">
                </div>
                <div class="inputbox">
                  <div class="text">开户银行</div>
                  <input class="input" v-model="issue[2].inv_reg_bname" placeholder="请输入开户银行" @focusout="inputBlur" @focusin="inputFocus">
                </div>
                <div class="inputbox">
                  <div class="text">银行账号</div>
                  <input class="input" v-model="issue[2].inv_reg_baccount" placeholder="请输入银行账号" @focusout="inputBlur" @focusin="inputFocus">
                </div>
              </div>
            </div>
          </div>
          <div class="block">
            <div class="boxitem">
              <div class="title">收票人信息</div>
              <div class="content">
                <div class="inputbox">
                  <div class="text">收票人姓名</div>
                  <input class="input" v-model="issue[2].inv_receive.name" placeholder="请输入姓名" @focusout="inputBlur" @focusin="inputFocus">
                </div>
                <div class="inputbox">
                  <div class="text">收票人手机号</div>
                  <input
                    class="input"
                    v-model="issue[2].inv_receive.phone"
                    placeholder="请输入手机号"
                    type="number"
                    maxlength="11"
                    @focusout="inputBlur"
                    @focusin="inputFocus"
                  >
                </div>
                <div class="inputbox">
                  <div class="text">所在地区</div>
                  <input class="input" v-model="issue[2].inv_receive.area" placeholder="请输入所在地区" @focusout="inputBlur" @focusin="inputFocus">
                </div>
                <div class="inputbox">
                  <div class="text">详细地址</div>
                  <input class="input" v-model="issue[2].inv_receive.adress" placeholder="请输入详细地址" @focusout="inputBlur">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="block" wx:else>
          <button class="button" @click="onBind">添加资质</button>
        </div>
      </div>

      <div class="block" style="margin-top:12px;">
        <div class="boxitem">
          <div class="title">发票内容</div>
          <div class="content">
            <div class="grid">
              <div class="grid-1-2">
                <div
                  class="button"
                  :class="invoiceContentIndex==0?'active':''"
                  @click="onInvoiceContent(0)"
                >商品明细
                </div>
              </div>
              <div class="grid-1-2">
                <div
                  v-if="issueType!=2"
                  class="button"
                  :class="invoiceContentIndex==1?'active':''"
                  @click="onInvoiceContent(1)"
                >商品类别
                </div>
                <div v-else style="font-size:12px">增值税发票只支持明细</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="block" style="margin-top: 32px" v-if="issueType!=2?true:issue[2]?true:false">
        <button class="button" type="warn" @click="onSubmit">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
  import Me from '../../dll/me'

  export default {
    name: 'mallInvoice',
    data () {
      return {
        xheader: {
          title: '开票信息'
        },
        invoiceTypeIndex: 0,
        invoiceHeadIndex: 0,
        invoiceContentIndex: 0,
        issueType: 0,
        isSubmit: false,
        issue: {
          '0': {
            isload: false,
            type: 0,
            inv_id: null,
            inv_receive: {
              phone: null,
              email: null
            }
          },
          '1': {
            type: 1,
            isload: false,
            inv_id: null,
            inv_title: null,
            inv_code: null,
            inv_content: null,
            inv_company: null,
            inv_receive: {
              phone: null,
              email: null
            }
          },
          '2': {
            type: 1,
            isload: false,
            inv_id: null,
            inv_title: null,
            inv_code: null,
            inv_content: null,
            inv_company: null,
            inv_reg_addr: null,
            inv_reg_phone: null,
            inv_reg_bname: null,
            inv_reg_baccount: null,
            inv_receive: {
              name: null,
              phone: null,
              email: null,
              area: null,
              adress: null
            }
          }
        }
      }
    },
    created () {
      this.getIssueInfo()
    },
    methods: {
      onInvoiceType (index) {
        if (this.invoiceTypeIndex == index) {
          return
        }
        let issueType
        let invoiceContentIndex = this.invoiceContentIndex
        if (index == 1) {
          issueType = 2
          invoiceContentIndex = 0
        } else if (this.invoiceHeadIndex == 0) {
          issueType = 0
        } else {
          issueType = 1
        }
        this.invoiceTypeIndex = index
        this.issueType = issueType
        this.invoiceContentIndex = invoiceContentIndex

        this.getIssueInfo()
      },
      onInvoiceHead (index) {
        this.invoiceHeadIndex = index
      },
      onInvoiceContent (index) {
        this.invoiceContentIndex = index
      },
      onOff () {
        this.$emit('onoff')
      },
      // 获取发票信息
      async getIssueInfo () {
        let issueType = this.issueType
        let issue = this.issue

        let res = await Me.getIssueInfo(issueType)
        if (res.code == 0) {
          if (!res.data) {
            return
          }
          for (var i in issue[issueType]) {
            if (i == 'inv_receive' && Array.isArray(res.data.inv_receive)) {
              continue
            }
            issue[issueType][i] = res.data[i]
          }
          this.issue = issue
        }
      },
      // 提交发票信息
      async subIssueInfo () {
        let issue = this.issue[this.issueType]
        let param = {
          type: this.issueType,
          inv_receive: JSON.stringify(issue.inv_receive)
        }
        if (param.type == 1) {
          param.inv_title = issue.inv_company
          param.inv_code = issue.inv_code
          param.inv_content =
            this.invoiceContentIndex == 0 ? '商品明细' : '商品类别'
          param.inv_company = issue.inv_company
        }
        if (param.type == 2) {
          param.inv_title = issue.inv_company
          param.inv_company = issue.inv_company
          param.inv_code = issue.inv_code
          param.inv_reg_addr = issue.inv_reg_addr
          param.inv_reg_phone = issue.inv_reg_phone
          param.inv_reg_bname = issue.inv_reg_bname
          param.inv_reg_baccount = issue.inv_reg_baccount
        }
        if (issue.inv_id) {
          param.inv_id = issue.inv_id
          let res = await Me.editIssueInfo(param)
          if (res.code == 0) {
            this.$emit('select', {
              type: param.type,
              id: res.data.inv_id
            })
          }
        } else {
          // eslint-disable-next-line no-undef
          let res = await me.addIssueInfo(param)
          if (res.code == 0) {
            this.$emit('select', {
              type: param.type,
              id: res.data.inv_id
            })
          }
        }
      },
      onBind () {
      },
      onSubmit () {
        alert(0)
        this.subIssueInfo()
      }
    }
  }
</script>

<style lang="less" scoped>
  .boxitem {
    background-color: #fff;
  }

  .boxitem .title {
    font-size: 15px;
    color: #351009;
    line-height: 21px;
    padding: 14px 24px;
  }

  .boxitem .content {
    padding: 14px 24px;
  }

  .boxitem .button {
    text-align: center;
    height: 28px;
    line-height: 28px;
    border: 1px solid #d4d4d4;
    font-size: 12px;
    width: 140px;
    margin: auto;
  }

  .boxitem .button.active {
    border: 1px solid #ae2309;
    color: #ae2309;
  }

  .inputbox {
    display: flex;
    align-items: center;
  }

  .inputbox .text {
    margin-right: 12px;
    font-size: 12px;
    color: #351009;
    width: 80px;
  }

  .inputbox .input {
    border: 1px solid #f1edec;
    padding: 0 12px;
    box-sizing: border-box;
    display: block;
    flex: 1;
    font-size: 12px;
    color: #351009;
    height: 33px;
    line-height: 33px;
  }

  .inputbox + .inputbox {
    margin-top: 12px;
  }

  .invoiceitem {
    background-color: #fff;
    padding: 12px 24px;
    font-size: 12px;
    color: #9f8d89;
    display: flex;
    flex-direction: row;
    line-height: 17px;
  }

  .invoiceitem .text {
    margin-left: 5px;
    flex: 1;
  }
</style>
